<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=ssss, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="js/angular.js"></script>
  <script type="text/javascript" src="js/angular-route.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

  
    <style type="text/css">
    .carousel-inner img {
      width: 100%;
      height:150px;
  }
        #nav {
            width: 110%;
    margin-left:-20px;
    margin-top: -10px;
 height: 60px;
 background-color: rgb(238, 215, 12);

 }         
 #nav ul {
 list-style: none;
 margin-left: 50px;
 }           
 #nav li {
 display: inline; 
 margin-left:-15px;               
 }           
 #nav a {
    font-size: 15px;
 line-height: 60px;
 color:goldenrod;
 text-decoration: none;
 padding: 20px 10px;
 }           
 #nav a:hover {
 background-color:darkseagreen;
 }
 #mianleft{
    
     width:30%;
     height:90px;
 }
 #mianleft img{
    
    width:100%;
    height:110px;
  margin-left: 0px;

}
#mianleft img:hover{

opacity: 0.7;


}
 #mainright{
   
     width: 70%;
     line-height:inherit;
     vertical-align:text-top;
     padding:0px;
     
 }
    </style>
</head>
<body ng-app='App' ng- controller='app'>
    <ul id="nav">
        <li><a href="#!/">首页</a></li>
        <li><a href="#!/computers">购物</a></li>
        <li><a href="#!/printers">会员数据</a></li>
        <!-- <li><a href="#!/blabla">会员中心</a></li> -->
        <li><a href="#!/log/1">订单详情</a></li>
    </ul>
    <div id="demo" class="carousel slide" data-ride="carousel">
 
        <!-- 指示符 -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>
       
        <!-- 轮播图片 -->
        <div class="carousel-inner" style="width:100%;margin-top:-20px;">
          <div class="carousel-item active">
            <img src="img/21.jpg">
          </div>
          <div class="carousel-item">
            <img src="img/23.jpg">
          </div>
          <div class="carousel-item">
            <img src="img/22.jpg">
          </div>
        </div>
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon" style="margin-left:-20px;" ></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon" style="margin-right:30px;"></span>
        </a>
       
      </div>
    <div ng-view></div>
    <script>

       var  app=angular.module('App',['ngRoute','logapp','apptow','denlu','aboutApp','appncc']);
       app.config(['$routeProvider', function($routeProvider){
            $routeProvider
            .when('/',{templateUrl:'about',
            //主页
            controller:function($scope,$window,$http){
                   $scope.mag="这是写在路由匹配规则里面的控制器";
                   $scope.text=function(value){
               $window.alert('hi,这里是'+value);
                       };
            $http({
            method:'get',//发起一个get请求
            url:'data.json'//请求的接口地址
        }).then(function(ok){
            console.log(ok)
            $scope.user=ok.data
            this.user=ok.data
           console.log(user)
           console.log(status)
        },function(err){
            alert('服务器请求数据错误！')
        })

            }})


            .when('/blablab',{
                templateUrl:'205.html'
            })
            .when('/computers',{  templateUrl:'index1.html',
                                  controller:'computeslog'})
            .when('/log/1',{templateUrl:'205.html'
             })
            //用:+字符串的形式吧网址的信息传到$routeParams里面去然后再通过$scope去解析出来
           .when('/log/:id',{template:'相当于vue里面的路由传值{{params}}',
               controller:function($scope,$routeParams){
                $scope.params=$routeParams
               }
        })
            .when('/printers',{templateUrl:'hy.html'})
            .otherwise({redirectTo:'/'});
        }]);
       app.controller('computeslog',function($scope){
           $scope.msg='这是同过控制器加载的字符串'
       })
       app.controller('app',function($scope){
           $scope.msg='这是同过控制器加载的字符串'
       })
       //创建一个新的控制器在URL加载的页面使用
       //这个也可以用一个介绍文件加载
    //    app.controller('computesloggg',function($scope){
    //        $scope.msg='这是同过控制器加载的字符串'
    //    })
    </script>
 
 <script src="js/url.js"></script>
 <script src="js/206.js"></script>
 <script src="js/205.js"></script>
 <script src="js/207.js"></script>
 <script src="js/denlu.js"></script>
 <script src="js/hy.js"></script>
 
 <script type="text/ng-template" id="about">
    <h6>
        猜你喜欢
    </h6>   
    {{user.id}}
    <hr/>
        <table style="width:100%">
         <tr ng-repeat='list in user'>
          <td id="mianleft"><img src='{{list.id}}' ng-click='text(list.name)'></td>
          <td id="mainright">
            <div style="margin-top:-5px">
              <h5 style="color:cornflowerblue;"> {{list.name}}</h5>
                <br/>
                  <h6 style="color:coral">电话：1938254766</h6>
                 
                  <span  style="color:red">&yen;:{{list.money}}</span>
               
                 <span style="margin-left:50%"> 已售{{list.man}}</span>
                  
              </div>
          </td>
        
         </tr>
         
        </table>
       
      </div>
      


</script>



</body >
</html>